/* Estilos base */
body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

h2 {
  margin-top: 40px;
}

/* Transición básica */
.basic {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-bottom: 20px;
  transition: width 2s, height 2s, transform 2s;
}

.basic:hover {
  width: 300px;
  height: 150px;
  transform: rotate(15deg);
}

/* Diferentes tipos de timing functions */
#div1, #div2, #div3, #div4, #div5 {
  width: 100px;
  height: 100px;
  background-color: coral;
  margin-bottom: 10px;
  transition: width 2s;
}

#div1:hover {
  width: 200px;
  transition-timing-function: linear;
}

#div2:hover {
  width: 200px;
  transition-timing-function: ease;
}

#div3:hover {
  width: 200px;
  transition-timing-function: ease-in;
}

#div4:hover {
  width: 200px;
  transition-timing-function: ease-out;
}

#div5:hover {
  width: 200px;
  transition-timing-function: ease-in-out;
}

/* Transición con delay */
.delay {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transition: width 2s linear 1s, height 2s linear 1s;
}

.delay:hover {
  width: 200px;
  height: 200px;
}

